
<template>
  <div class="reg">
    <MyHead title="注册账号"></MyHead>
    <div class="forms">
      <van-form @submit="onSubmit" @failed="onFail">
        <van-cell-group inset>
          <van-field
            clearable
            v-model="form.tel"
            name="tel"
            label="手机号"
            placeholder="手机号"
            left-icon="phone-o"
            :rules="[
              { required: true, message: '请输入手机号' },
              {
                pattern: reg.phone,
                message: '请输入格式正确的手机号',
              },
            ]"
          ></van-field>
          <van-field
            clearable
            name="code"
            v-model="form.code"
            label="验证码"
            placeholder="验证码"
            left-icon="qr"
            :rules="[
              { required: true, message: '请输入验证码' },
              {
                pattern: reg.code,
                message: '请输入五位数字验证码',
              },
            ]"
          >
            <template #button>
              <van-button
                v-if="flag"
                @click="sentPhoneCode"
                :disabled="!reg.phone.test(form.tel)"
                size="small"
                type="primary"
                >发送验证码</van-button
              >
              <van-button v-else :disabled="true" size="small" type="primary"
                >剩余{{ count }} s</van-button
              >
            </template>
          </van-field>
          <van-field
            clearable
            v-model="form.email"
            name="email"
            label="邮箱"
            placeholder="邮箱"
            left-icon="envelop-o"
            :rules="[
              { required: true, message: '请输入邮箱' },
              {
                pattern: reg.email,
                message: '请输入格式正确的邮箱',
              },
            ]"
          ></van-field>
          <van-field
            clearable
            v-model="form.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            left-icon="closed-eye"
            :rules="[{ required: true, message: '请输入密码' }]"
          />
          <van-field
            clearable
            v-model="form.dbpass"
            type="password"
            name="dbpass"
            label="确认密码"
            placeholder="确认密码"
            left-icon="closed-eye"
            :rules="[{ required: true, message: '请输入确认密码' }]"
          />
        </van-cell-group>

        <div style="margin: 16px">
          <van-button size="small" block type="primary" native-type="submit">
            注册
          </van-button>
          <van-button
            size="small"
            block
            style="margin-top: 16px"
            type="danger"
            native-type="reset"
          >
            重置
          </van-button>
        </div>
        <div class="links" style="margin: 16px">
          <router-link to="/login" class="aitem">登录</router-link>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { showToast } from "vant";
import { reg } from "../utils/validate";
import {docheckcode,  docheckphone,  dofinishregister,  todoLogin,  todoSentCode,} from "../api/api";
import { useCommonHook } from "../hooks";

const { gotopage } = useCommonHook();
const form = ref({});
const flag = ref(true);
const count = ref(60);

const timeDown = () => {
  flag.value = false;
  count.value--;
  var timer = setInterval(() => {
    if (count.value > 0) {
      count.value--;
    } else {
      clearInterval(timer);
      timer = null;
      flag.value = true;
      count.value = 100;
    }
  }, 1000);
};

// 发送验证码
const sentPhoneCode = async () => {
  let data = await docheckphone({
    tel: form.value.tel,
  });
  if (data.code == 200) {
    let res = await todoSentCode({
      tel: form.value.tel,
    });
    if (res.code == 200) {
      showToast(res.message + "code==" + res.data);
      timeDown();
    }
  } else {
    showToast(data.message);
  }
};

const onSubmit = async (value) => {
  console.log(value);
  if (value.password == value.dbpass) {
    let data = await docheckcode({
      tel: value.tel,
      telcode: value.code,
    });
    if (data.code == 200) {
      let res = await dofinishregister({
        tel: value.tel,
        password: value.password,
      });
      if (res.code == 200) {
        showToast("注册成功");
        gotopage("/login?tel=" + value.tel);
      }
    } else {
      showToast(data.message);
    }
  } else {
    showToast("两次密码输入不一致!");
  }
};
const onFail = () => {
  showToast("校验失败");
};
</script>

<style scoped>
.reg {
  overflow: hidden;
}
.forms {
  padding: 20px 5px;
}
</style>